<template>
	<view class="bg-w order-item">
		<view class="flex flex-align-center flex-space-between order-sn font24">
			<text class="color-8E8E8E">订单编号 {{ dataItem.orderSn }}</text>
			<text class="col" style="color: #F52200;">待支付</text>
		</view>
		<view class="m-t-30 goods-box flex">
			<image class="border-r10" 
				v-if="dataItem.price"
				style="width: 132rpx;height: 132rpx;margin-right: 16rpx;" :src="dataItem.pic" mode=""></image>
			<image class="border-r10"
				v-else
				style="width: 200rpx;height: 200rpx;margin-right: 16rpx;margin-bottom: 30rpx;" :src="dataItem.pic" mode=""></image>
			<view class="flex-1">
				<view class="flex flex-align-center flex-space-between">
					<text class="color-b3 font28 f-b">{{ dataItem.name }}</text>
					<text style="color: #001226;" v-if="dataItem.price">
						<text class="font20">¥</text>
						<text class="font32 f-b" style="margin-left: 8rpx;">{{ dataItem.price }}</text>
					</text>
				</view>
				<view v-if="dataItem.goodsNum" class="color-b5 flex flex-align-center flex-space-between font24 m-t-10">
					<text>{{ dataItem.content }}</text>
					<text v-if="dataItem.goodsNum">X{{ dataItem.goodsNum }}</text>
				</view>
				<block v-if="dataItem.time">
					<view class="color-b5 font24" style="margin: 30rpx 0;">
						购买时间：{{ dataItem.content }}
					</view>
					<view class="color-b5 font24">
						购买时间：{{ dataItem.time }}
					</view>
				</block>
				
				<view v-if="dataItem.totalMoney" class="color-001226 flex flex-space-end flex-align-center m-t-30">
					<text class="font28">支付总额</text>
					<text class="font40 f-b" style="margin-left: 16rpx;">¥{{ dataItem.totalMoney }}</text>
				</view>
				<view class="button-box flex flex-space-end m-t-30" v-if="dataItem.totalMoney">
					<view class="flex flex-center font28 color-b6">取消订单</view>
					<view class="flex flex-center font28 color-3FA897 f-b m-l-30">立即支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		dataItem: {
			type: Object,
			default: {}
		}
	})
</script>

<style lang="scss" scoped>
	.color-001226 { color: #001226; }
	.order-item {
		border-radius: 32rpx;
		padding: 0 12rpx;
		margin-top: 20rpx;
		.order-sn {
			padding: 18rpx;
			border-bottom: 1rpx solid #E5E5E5;
		}
		.goods-box {
			padding: 0 18rpx;
		}
	}
	.button-box  {
		margin-bottom: 30rpx ;
		view {
			height: 64rpx;
			padding: 0 34rpx;
			border: 1rpx solid #E5E5E5;
			border-radius: 32rpx;
		}
	}
</style>
